<template>
  <view v-if="show" class="upload-notice-modal">
    <view class="modal-mask" @click="$emit('update:show', false)"></view>
    <view class="modal-content">
      <view class="modal-header">— 上传形象须知 —</view>
      <view class="modal-section">
        <view class="modal-subtitle success">＜ 正确示例 ＞</view>
        <view class="photo-examples-row">
          <image class="photo-example" src="https://i.ibb.co/39BjxBxn/true-1.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/39BjxBxn/true-1.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/kRRH6DN/true-2.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/kRRH6DN/true-2.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/F4Rwr9X2/true-3.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/F4Rwr9X2/true-3.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/DfBrkJzX/true-4.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/DfBrkJzX/true-4.png')"></image>
        </view>
        <view class="modal-desc">支持不同性别、肤色、年龄（6岁以上）的人物图。<br>人物全身正面照，光照良好。人物手部展示完整，避免手持交叉遮挡等情况。</view>
      </view>
      <view class="modal-section">
        <view class="modal-subtitle error">＜ 错误示例 ＞</view>
        <view class="photo-examples-row">
          <image class="photo-example" src="https://i.ibb.co/Kx3XLKJL/false-4.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/Kx3XLKJL/false-4.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/rKd56K0H/false-3.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/rKd56K0H/false-3.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/9mYSNzQR/false-1.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/9mYSNzQR/false-1.png')"></image>
          <image class="photo-example" src="https://i.ibb.co/Q71YKbMB/false-2.png" mode="aspectFit" @click="openExamplePreview('https://i.ibb.co/Q71YKbMB/false-2.png')"></image>
        </view>
        <view class="modal-desc">不要上传非正面全身照（避免上传侧脸、坐姿、躺姿、半身照片）；<br>多人照片；人物加装道具（避免手持物、包等）；光线过暗/模糊不清。</view>
      </view>
      <view class="modal-section bottom-row">
        <view class="modal-bottom-row-flex">
          <view class="modal-checkbox-row">
            <view class="checkbox" :class="{checked: checked}" @click="toggleCheck">
              <text v-if="checked">√</text>
            </view>
            <text class="checkbox-label">下次不再显示弹窗</text>
          </view>
          <text class="promise-link" @click="showPromise = true">查看安全承诺</text>
        </view>
        <view class="modal-btn-row">
          <button class="modal-btn disagree" @click="handleDisagree">不同意</button>
          <button class="modal-btn agree" @click="handleAgree">同意</button>
        </view>
        <view class="modal-tip">上传不符合标准的照片，可能导致生成效果不佳哦！</view>
      </view>
      <!-- 大图预览弹窗 -->
      <view v-if="showExamplePreview" class="example-preview-modal">
        <view class="example-preview-mask" @click="closeExamplePreview"></view>
        <image :src="examplePreviewUrl" class="example-preview-img" mode="widthFix"></image>
      </view>
      <!-- 安全承诺弹窗 -->
      <view class="promise-modal" v-if="showPromise">
        <view class="promise-mask" @click="showPromise = false"></view>
        <view class="promise-content">
          <view class="promise-title-row">
            <text class="promise-title">安全承诺</text>
            <text class="promise-close" @click="showPromise = false">×</text>
          </view>
          <view class="promise-item">1. 我们保证数据安全，请放心使用。</view>
          <view class="promise-item">2. 请确保你使用的照片获得本人授权同意，严禁使用未获得本人授权同意的照片。</view>
          <view class="promise-item">3. 请确保上传照片内容健康、合法，不涉及任何违法或不道德的内容。</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UploadNoticeModal',
  props: {
    show: {
      type: Boolean,
      required: true
    },
    localKey: {
      type: String,
      default: 'hideUploadNoticeModal'
    }
  },
  emits: ['update:show', 'agree', 'disagree'],
  data() {
    return {
      checked: false,
      showPromise: false,
      showExamplePreview: false,
      examplePreviewUrl: ''
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.checked = !!uni.getStorageSync(this.localKey);
      }
    }
  },
  methods: {
    handleAgree() {
      if (this.checked) {
        uni.setStorageSync(this.localKey, true);
      } else {
        uni.removeStorageSync(this.localKey);
      }
      this.$emit('agree', this.checked);
      this.$emit('update:show', false);
    },
    handleDisagree() {
      this.$emit('disagree');
      this.$emit('update:show', false);
    },
    toggleCheck() {
      this.checked = !this.checked;
    },
    openExamplePreview(url) {
      this.examplePreviewUrl = url;
      this.showExamplePreview = true;
    },
    closeExamplePreview() {
      this.showExamplePreview = false;
      this.examplePreviewUrl = '';
    }
  }
}
</script>

<style scoped>
.upload-notice-modal {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 3000; display: flex; align-items: center; justify-content: center;
}
.modal-mask {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.18);
}
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 28rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
  min-width: 320rpx;
  max-width: 600rpx;
  box-shadow: 0 8rpx 32rpx rgba(232,62,140,0.13);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-header {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin: 18rpx 0 18rpx 0;
  color: #222;
  letter-spacing: 2rpx;
}
.modal-section {
  margin-bottom: 16rpx;
  padding: 0 25rpx;
}
.modal-subtitle {
  font-size: 25rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  letter-spacing: 1rpx;
}
.modal-subtitle.success { color: #2ecc40; }
.modal-subtitle.error { color: #e83e8c; }
.photo-examples-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rpx;
  gap: 10rpx;
}
.photo-example {
  width: 140rpx;
  height: 280rpx;
  border-radius: 8rpx;
  background: #f7f7f7;
  object-fit: cover;
  box-shadow: 0 2rpx 8rpx rgba(232,62,140,0.04);
  border: 1px solid #f3e6ef;
}
.modal-desc {
  font-size: 22rpx;
  color: #888;
  line-height: 1.6;
  margin-bottom: 4rpx;
  text-align: left;
}
.modal-section.bottom-row {
  margin-top: 8rpx;
  padding: 0 18rpx;
}
.modal-bottom-row-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8rpx;
}
.modal-checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.checkbox {
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #e0b2c6;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
  font-size: 20rpx;
  color: #fff;
  background: #fff;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s;
  box-shadow: 0 2rpx 6rpx rgba(232,62,140,0.04);
  cursor: pointer;
}
.checkbox.checked {
  background: linear-gradient(90deg,#e83e8c 0%,#ffb6d5 100%);
  border: 2rpx solid #e83e8c;
  color: #fff;
}
.checkbox text {
  font-size: 20rpx;
  color: inherit;
  line-height: 1;
  font-weight: bold;
  user-select: none;
}
.checkbox:active, .checkbox:hover {
  box-shadow: 0 4rpx 12rpx rgba(232,62,140,0.10);
  border-color: #e83e8c;
}
.checkbox-label {
  font-size: 20rpx;
  color: #b08ca7;
  margin-left: 2rpx;
}
.promise-link {
  color: #3b7cff;
  text-decoration: underline;
  font-size: 22rpx;
  cursor: pointer;
}
.modal-btn-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
  gap: 16rpx;
}
.modal-btn-row .modal-btn {
  flex: 1;
  height: 64rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  margin: 0;
  box-shadow: 0 2rpx 8rpx rgba(232,62,140,0.04);
}
.modal-btn-row .modal-btn.disagree {
  background-color: #f5f5f5;
  color: #888;
  border: 1px solid #eee;
}
.modal-btn-row .modal-btn.agree {
  background: linear-gradient(90deg,#e83e8c 0%,#ffb6d5 100%);
  color: #fff;
  border: none;
}
.modal-tip {
  text-align: center;
  color: #e83e3e;
  font-size: 22rpx;
  margin-top: 4rpx;
  line-height: 1.5;
}
/* 大图预览弹窗样式 */
.example-preview-modal {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 3000; display: flex; align-items: center; justify-content: center;
}
.example-preview-mask {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7);
}
.example-preview-img {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
  z-index: 1;
  border: 4rpx solid rgba(255,255,255,0.5);
}
/* 安全承诺弹窗样式 */
.promise-modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
}
.promise-mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
}
.promise-content {
  position: relative;
  background: #fff;
  border-radius: 28rpx;
  padding: 48rpx 36rpx 36rpx 36rpx;
  min-width: 320rpx;
  max-width: 600rpx;
  box-shadow: 0 8rpx 32rpx rgba(232,62,140,0.13);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.promise-title-row {
  width: 100%;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 24rpx;
  position: relative;
}
.promise-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #e83e8c;
  text-align: center;
  letter-spacing: 2rpx;
}
.promise-close {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  font-size: 40rpx;
  color: #bbb;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0 8rpx;
}
.promise-close:hover {
  color: #e83e8c;
}
.promise-item {
  font-size: 28rpx;
  color: #555;
  line-height: 2.1;
  margin-bottom: 18rpx;
  width: 100%;
  border-bottom: 1px solid #f3e6ef;
  padding-bottom: 12rpx;
  text-align: left;
}
.promise-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
</style> 